<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
            <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
            <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
            <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
            <li><router-link class="list_item" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
            <li><router-link class="list_item on" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
          </ul>
        </div>
        <!-- 推广页面 -->
        <h3 class="invite-title"><span class="title-name">推荐管理</span></h3>
        <div class="manage-box">
            <div class="manage-item itembg1">
            <p class="item-title">推荐说明：</p>
            <p class="info-text">
              （1）使用您的推广链接注册，并创建有效活动，您将获取88元/场的推广收入，上不封顶，收入可全部提现。<br>
              （2）推荐用户升级购买会员，奖励10%的金额。
            </p>
            <div class="tips-box">
              <el-tooltip effect="light" content="单个活动浏览量大于10万">
                <span class="tips">什么是有效活动 ？</span>
              </el-tooltip>
            </div>
            </div>
            <div class="manage-item itembg2">
            <p class="item-title">账户余额：
              <el-link type="danger" icon="el-icon-money" href="javascript:void(0)" @click.native="drawCash">申请提现</el-link>
            </p>
            <p class="balance">￥<span class="money">{{(userInfo.surplus / 100).toFixed(2)}}</span></p>
            <div class="tips-box">
                <p class="include">推荐总收入：<span class="red tj-money">￥{{(userInfo.reward / 100).toFixed(2)}}</span></p>
            </div>
            </div>
            <div class="manage-item itembg3">
            <p class="item-title">提现流程：</p>
            <p class="info-text">
                当你推荐的收入满100元时，联系平台客服，1-2个工作日内将为您处理提现
            </p>
            <div class="tips-box">
                <span class="tips">提现请联系客服！</span>
                <div class="qrcode-info">
                <img src="/static/index/img/kf2.png" alt="" />
                </div>
            </div>
            </div>
            <div class="manage-item itembg4">
            <p class="item-title">我的推广链接：</p>
            <el-input :value="invertUrl" readonly />
            <div class="tips-box">
                <el-button v-clipboard:copy="invertUrl" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError" type='primary'>复制链接</el-button>
            </div>
            </div>
        </div>
        <h3 class="invite-title">
            <span class="title-name">我的推广用户</span>
            <span>总达标活动：<strong class="db-num">{{total}}</strong>场</span>
        </h3>
        <el-table id="invite-user-table" :data="list">
          <el-table-column label="用户注册手机号" width="280" prop="phone"></el-table-column>
          <el-table-column label="活动链接" prop="url"></el-table-column>
          <el-table-column label="活动创建时间" prop="addtime" width="300"></el-table-column>
          <el-table-column label="是否达标" width="150">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.active" effect="dark">已达标</el-tag>
              <el-tag type="danger" v-if="!scope.row.active" effect="dark">未达标</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </center>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import User from '../../utils/user'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
export default {
  name: 'Manage',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      invertUrl: '',
      userInfo: {},
      list: [],
      total: 0,
      page:1,
      pageSize: 20,
      recordCount: 0
    }
  },
  created () {
    this.userInfo = User.getInfo();
    if(!this.userInfo || !User.getToken()) {
      this.$router.replace('/Login');
      return;
    }
    this.setTitle('推荐管理');
    var url = location.href;
    var n = url.indexOf('/', 8);
    url = url.substring(0, n+1);
    this.invertUrl = url + 'Login?reg=1&spid=' + this.userInfo.referral;
    this.loadData();
  },
  methods: {
    onCopySuccess(){
      this.$message({type: 'success', message:'链接复制成功', duration: 5000});
    },
    onCopyError(){
      this.$message({type: 'error', message:'复制失败，请手动复制', duration: 5000});
    },
    setPage(n){

    },
    loadData(){
      Ajax.get('member/related/activity', {
        page: this.page,
        size: this.pageSize
      }).then(res=>{
        if(res.code == 0){
          this.recordCount = res.data.recordCount;
          this.total = res.data.total;
          this.list = res.data.data;
        } else {
          this.$alert(res.msg, {type:'error'});
        }
      }).catch(err=>{
        console.error(err);
        this.$alert('获取数据失败', {type:'error'});
      })
    },
    drawCash(){
      if(this.userInfo.surplus < 100) {
        this.$alert('账户余额不足，无法申请提现', {type:'warning'});
        return;
      }
      Ajax.post('member/drawcash', {amount: this.userInfo.surplus}).then(res=>{
        if(res.code == 0){
          this.$alert('提现申请提交成功！', {type:'success'});
          this.$router.replace('/DrawList');
        } else {
          this.$alert(res.msg, {type:'warning'});
        }
      }).catch(err=>{
        console.error(err);
        this.$alert('提交失败，网络错误', {type:'error'});
      })
    }
  }
}
</script>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/invate.css"  scoped></style>
